<template>
  <div id="account">
    <Breadcrumb :pathContent="content" />
    <el-form ref="AdminUserAddRequest"
      label-width="100px"
      class="demo-ruleForm">
      <div class="information-page">
        <el-form-item class="information-title">
          <h1>基础信息</h1>
        </el-form-item>
        <div class="basic-information">
          <div class="information-left-page">
            <el-form-item label="登录账号"
              prop="account">
              <el-input v-model="AdminUserAddRequest.account"
                placeholder="请输入账号"
                disabled=""></el-input>
            </el-form-item>
            <div style="overflow: hidden;">
              <div class="information-left">
                <el-form-item label="姓名"
                  prop="name">
                  <el-input v-model="AdminUserAddRequest.name"
                    placeholder="请输入姓名"
                    disabled=""></el-input>
                </el-form-item>
              </div>
              <div class="information-right">
                <el-form-item label="手机"
                  prop="mobile">
                  <el-input v-model="AdminUserAddRequest.mobile"
                    placeholder="请输入手机号码"></el-input>
                </el-form-item>
              </div>
            </div>
            <el-form-item label="部门"
              prop="dept">
              <el-cascader :options="dept"
                :props="{ value: 'id', label: 'department', children: 'adminDepartments' }"
                v-model="AdminUserAddRequest.departments"
                disabled
                 change-on-select
                :show-all-levels="false">
              </el-cascader>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="AdminUserAddRequest.position"
                placeholder="请输入职位"
                disabled></el-input>
            </el-form-item>
            <el-form-item label="部门负责人"
              style="text-align: left;">
              <el-radio-group v-model="AdminUserAddRequest.responsible"
                disabled>
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="information-left">
              <el-form-item label="Email">
                <el-input v-model="AdminUserAddRequest.email"
                  placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </div>
            <div class="information-right">
              <el-form-item label="QQ">
                <el-input v-model="AdminUserAddRequest.qq"
                  placeholder="请输入QQ号码"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="information-right-page">
            <el-form-item label="员工头像"
              style="margin-bottom: 28px;">
              <el-upload class="avatar-uploader"
                :show-file-list="false"
                :http-request="sendChange"
                 action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="onFilesAdd">
                <img v-if="oldPath"
                  :src="oldPath"
                  class="avatar"
                  width="88"
                  height="88" />
                <i v-else
                  class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p class="img-content">仅支持JPG, JPEG, BMP, PNG格式, 文件小于10M<br />(建议使用缕空白色图像, 最佳尺寸126 * 45px)</p>
            </el-form-item>
          </div>
        </div>
        <div v-if="isAdmin">
          <el-form-item class="information-title page-title">
            <h1>账号权限
              <label style="color: rgb(145, 160, 177); font-size: 12px; font-weight: 300; margin-left: 30px;">权限与角色关联, 这样该账号的角色可完成权限设置</label>
            </h1>
          </el-form-item>
          <el-form-item label="账号权限"
            class="group-page">
            <el-checkbox-group v-model="roles">
              <el-checkbox :label="item.id"
                :key="item.id"
                v-for="item in rolesId"
                :disabled="true">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </div>
      <div class="information-btn">
        <el-form-item>
          <el-button type="primary"
            @click="saveAccount">保存</el-button>
          <el-button @click="back">取消</el-button>
          <el-button @click="editAccountPass">修改密码</el-button>
        </el-form-item>
      </div>
      <el-dialog title="修改密码"
        :visible.sync="editPassword"
        width="20%">
        <el-form :model="form">
          <el-form-item label="旧密码"
            label-width="60px">
            <el-input v-model="form.oldPassword"
              auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码"
            label-width="60px">
            <el-input v-model="form.newPasswordOne"
              auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="重复输入"
            label-width="60px">
            <el-input v-model="form.newPasswordTwo"
              auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
          class="dialog-footer">
          <el-button type="primary"
            @click="savePassword">确 定</el-button>
          <el-button @click="editPassword = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import {
  getAccount,
  getDeptstaffAll,
  updateAccount,
  accountSetPassword,
  getRoleList,
  upimg
} from "@/public/js/setting";
const ButtonFooter = () => import("@/components/common/ButtonFooter");
const Breadcrumb = () => import("@/components/common/Breadcrumb");
export default {
  name: "AddAccount",
  props: ["formType"],
  data() {
    return {
      editPass: false,
      form: {},
      dept: [],
      content: {
        firstTitle: "设置",
        secondTitle: "账号信息",
        type: "close"
      },
      roles: [],
      rolesId: [],
      editPassword: false,
      AdminUserAddRequest: {},
      isAdmin: true,
      id: "",
      oldPath:''
    };
  },
  created() {
    getAccount().then(res => {
      if (res.data.errCode === 0) {
        this.isAdmin = res.data.accountInfo.account !== "admin";
        this.AdminUserAddRequest = res.data.accountInfo;
        this.AdminUserAddRequest.departments = res.data.accountInfo.departments;
        this.id = res.data.accountInfo.id;
        this.oldPath = res.data.accountInfo.photo;
        this.AdminUserAddRequest.roles.forEach(e => {
          this.roles.push(e.id);
        });
      }
    });
    getDeptstaffAll().then(res => {
      if (res.data.errCode === 0) this.dept = res.data.adminDepartments;
    });
    // 获取全部权限
    getRoleList().then(res => {
      this.rolesId = res.data.adminRoles;
    });
  },
  methods: {
    savePassword() {
      let data = this.form;

      accountSetPassword(data).then(res => {
        if (res.data.errCode === 0) {
          this.$alert("密码修改成功, 需要重新登录", "提示", {
            confirmButtonText: "确定",
            callback: action => {
              this.$router.push("/");
            }
          });
          this.editPassword = false;
        }
      });
    },
    editAccountPass() {
      this.editPassword = true;
      this.form = { id: this.id };
    },
    cancel() {
      this.$router.push("/index/order_form");
    },
    // 头像上传
    onFilesAdd(file, filelist) {},
    sendChange(e) {
      var reader = new FileReader();
      reader.readAsDataURL(e.file);
      
      reader.onload = e => {
        let photoPath = e.target.result;
        upimg({
          nowPath: photoPath,
          oldPath: this.oldPath
        }).then(res=>{
          this.oldPath = res.data.path
        })
      };
    },
    saveAccount() {
      let data = {
        id: this.AdminUserAddRequest.id,
        account: this.AdminUserAddRequest.account,
        password: this.AdminUserAddRequest.password,
        confirmPwd: this.AdminUserAddRequest.confirmPwd,
        name: this.AdminUserAddRequest.name,
        mobile: this.AdminUserAddRequest.mobile,
        dept: this.AdminUserAddRequest.dept,
        position: this.AdminUserAddRequest.position,
        responsible: this.AdminUserAddRequest.responsible,
        email: this.AdminUserAddRequest.email,
        qq: this.AdminUserAddRequest.qq,
        photo: this.oldPath
      };
     
      // 表单验证
      const regPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
      const regEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      const regQq = /^[1-9][0-9]{4,11}$/;
      if (!data.mobile.match(regPhone)) {
        this.$message({
          type: "error",
          message: "手机格式错误"
        });
        return false;
      } else if (data.email && !data.email.match(regEmail)) {
        this.$message({
          type: "error",
          message: "邮箱格式错误"
        });
        return false;
      } else if (data.qq && !data.qq.match(regQq)) {
        this.$message({
          type: "error",
          message: "qq格式错误"
        });
        return false;
      }
      updateAccount(data).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success("账号信息保存成功");
          //this.$router.go(-1);
        }
      });
    },
    back() {
      this.$router.go(-1);
    }
  },
  components: {
    ButtonFooter,
    Breadcrumb
  }
};
</script>
<style lang="scss" scoped>
#account {
  .information-btn {
    margin-left: 0;
  }
  margin-bottom: 63px;
  .el-cascader {
    width: 100%;
  }
}
.information-page {
  background: white;
  margin-top: 10px;
  .group-page {
    .el-form-item__content {
      text-align: left;
    }
  }
}
.page-title,
.title {
  margin-bottom: 0;
}

.group-page {
  margin-bottom: 0;
  .el-checkbox-group {
    float: left;
    margin-right: 20px;
  }
}

.foo-warpper {
  padding: 0 20px 20px 20px;
}

.information-page {
  padding: 20px;
  .basic-information,
  .account-permissions {
    overflow: hidden;
    .information-left-page {
      width: 47%;
      float: left;
    }
    .information-right-page {
      width: 47%;
      float: right;
    }
  }
  .basic-information {
    .information-left-page {
      .information-title {
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .area {
        text-align: left;
      }
    }
  }
  h1 {
    color: #45a2ff;
    text-align: left;
  }
}
.el-select > .el-input {
  display: inline-block;
}

.information-left {
  width: 50%;
  float: left;
}
.information-right {
  width: 50%;
  float: left;
}
.information-title {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}

.complexity {
  text-align: left;
  overflow: hidden;
  span {
    margin-top: 5px;
    line-height: 2;
    color: white;
    padding: 0 40px;
    text-align: center;
    display: inline-block;
    background-color: #e9ecf3;
    float: left;
    margin-right: 2px;
    font-size: 12px;
  }
}
.passwordbg {
  background-color: #1f88f0 !important;
}

.add-account .el-form .el-form-item label {
  text-align: right;
}
</style>
